<template>
	<div class="containers">
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-add mr10" @click="addregion" size="mini">添加</el-button>
        <el-select v-model="first" @change="getData" placeholder="请选择一级分类" size="mini" class="mr10">
          <el-option v-for="(item, index) in primaryclassification" :key="item.ID" :label="item.name" :value="item.ID"></el-option>
        </el-select>
        <el-input v-model="keyword" placeholder="分类名称" class="handle-input mr10" size="mini"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getData" class="mr10" size="mini">搜索</el-button>
			</div>

			<el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header"
				@selection-change="handleSelectionChange" v-loading="loading" :height="$tableHight" border size="mini">
				<el-table-column type="index" width="55" label="序号" align="center"></el-table-column>

				<el-table-column prop="name" label="分类名称"></el-table-column>
				<el-table-column label="展示图片" align="center">
					<template slot-scope="scope">
						<el-image class="table-td-thumb" :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序">
					<template slot-scope="scope">
						<el-input size="mini" v-model="scope.row.sort" @blur="operations(scope.row, 1)"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="是否显示" align="center">
					<template slot-scope="scope">
						<el-tag size="mini" :type="scope.row.is_display ? 'success' : 'danger'">{{
							scope.row.is_display ? '是' : '否' }}</el-tag>
					</template>
				</el-table-column>
        <el-table-column prop="CreatedAt" label="创建时间">
          <template slot-scope="scope">
            {{ $clearTimer(scope.row.CreatedAt) }}
          </template>
        </el-table-column>
				<el-table-column label="操作"  align="center">
					<template slot-scope="scope">
						<el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button type="text" size="mini" icon="el-icon-delete" class="red"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button type="text" size="mini" @click="copy('/pages/commodity/list?class_second_id='+scope.row.ID)">复制链接</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑/添加弹出框 -->
		<el-dialog :title="type?'编辑':'添加'" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">

        <el-form-item label="分类名称">
          <el-select v-model="form.class_first_id" placeholder="请选择一级分类" size="small" class="mr10">
            <el-option v-for="(item, index) in primaryclassification" :key="item.ID" :label="item.name" :value="item.ID">
          </el-option>
        </el-select>
        </el-form-item>
				<el-form-item label="分类名称"><el-input v-model="form.name"></el-input></el-form-item>
				<el-form-item label="排序"><el-input v-model="form.sort" type="Number"></el-input></el-form-item>
				<el-form-item label="是否展示">
						<el-switch :active-value="1" :inactive-value="0" v-model="form.is_display"></el-switch>
					</el-form-item>
				<el-form-item label="展示图片">
				<div style="color:red;">比例:100/100</div>
					<el-upload class="avatar-uploader" :action="upload+'/'" :show-file-list="false" :data="upimg"
						:on-success="handleAvatarSuccess" :before-upload="beforeupload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'basetable',
	data() {
		return {
			options: [{key:'轮播',},{key:'广告',id:1},{key:'商家轮播',id:2}], // 下拉选项
			form: {
				name: '',
				img: '',
				sort: 0,
				is_display:1,
				class_first_id:''
			},
			query: {
				pageIndex: 1,
				 pageSize: 20
			},
			upimg: {
				token: '',
				key: new Date().valueOf()
			},
			code:0,
			upload:'',
      keyword:'',
			tableData: [],
			multipleSelection: [],
			editVisible: false,
			pageTotal: 0,
			imageUrl: '',
			type:0,
      primaryclassification:[],
      first:0,
			loading:false
		};
	},
	created() {
		this.getToken().then(res => {
						this.upimg.token =res.data.token
						this.url = res.data.url
						this.upload = res.data.upload
				},
				function () {
					console.log('请求失败处理');
				}
			)
		this.init()
	},
	methods: {
		copy(row) {
      // 创建一个input框
      const input = document.createElement('input')
      // 将指定的DOM节点添加到body的末尾
      document.body.appendChild(input)
      // 设置input框的value值为复制的值
      const address = row
      input.setAttribute('value', address)
      // 选取文本域中的内容
      input.select()
      // copy的意思是拷贝当前选中内容到剪贴板
      // document.execCommand（）方法操纵可编辑内容区域的元素
      // 返回值为一个Boolean，如果是 false 则表示操作不被支持或未被启用
      if (document.execCommand('copy')) {
        document.execCommand('copy')
      }
      // 删除这个节点
      document.body.removeChild(input)
      // 弹窗：复制成功
      this.$message.success('复制成功');
      //
    },
    init(){
      this.request('admin/firstClass/', 'get', { page:1, size: 100,keyword:''}).then(res => {
				console.log('一级分类',res.data.data.length,res.data.data[0].ID)
        this.primaryclassification=res.data.data
        // this.first=res.data.data.length>0?res.data.data[0].ID:''
        if(res.data.data.length){
          this.first=res.data.data[0].ID
        }
		    this.getData()
			})
    },
		// 上传图片
		handleAvatarSuccess(res, file) {
			this.form.img = this.url + res.key;
			this.imageUrl = URL.createObjectURL(file.raw);
		},
		beforeupload(file) {
			if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
				this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
				return false;
			}
			if (file.size / 1024 / 1024 > 1) {
				this.$message.error('上传图标大小不能超过 1M!');
				return false;
			}
			let types = file.name.split('.')//获取图片格式
			this.upimg.key = this.$template+'/home/' + new Date().valueOf() + '.' + types[types.length-1];
		},
		//获取数据
		getData() {
      	this.loading=true
			this.request('admin/secondClass/', 'get', {class_first_id:this.first, page: this.query.pageIndex, size: this.query.pageSize,keyword:this.keyword}).then(res => {
				// console.log(res)
				this.tableData=res.data.data
				this.pageTotal=res.data.total
			})
      	this.loading=false
		},
		// 编辑
		handleEdit(e) {
			this.editVisible = true;
			this.form = e;
			this.imageUrl = e.img;
			this.type=1
		},
		cancel() {
			this.editVisible = false;
			this.form = {
				name: '',
				img: '',
				sort: 0,
				is_display:1,
				class_first_id:''

			};
			this.getData();
		},
		// 修改排序
		operations(e, code) {
			console.log(e)
			e.sort=Number(e.sort)
			console.log(e)
			this.request('admin/secondClass/', 'put',e).then(res => {
				if (res.errno == 0) {
					this.$message.success(res.errmsg);
				} else {
					this.$message.error(res.errmsg);
				}
			});
			this.editVisible = false;
			this.getData();
		},
		// 删除操作
		handleDelete(index, row) {
			// 二次确认删除
			this.$confirm('确定要删除吗？', '提示', {
				type: 'warning'
			})
				.then(() => {
					this.request('admin/secondClass/', 'delete', { ID: row.ID }).then(res => {
						if (res.errno == 0) {
							this.$message.success(res.errmsg);
							this.tableData.splice(index, 1)
							this.getData()
						} else {
							this.$message.error(res.errmsg);
						}
					});
				})
		},
		// 多选操作
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		// 添加
		addregion() {
			this.form = {
				name: '',
				img: '',
				sort: 0,
				is_display:1,
				class_first_id:''

			};
			this.type=0
			this.imageUrl = '';
			this.editVisible = true;
		},

		// 添加/修改
		saveEdit() {
      console.log(this.form)
			this.form.sort=Number(this.form.sort)
      if (!this.form.class_first_id) return this.$message.error('请选择一级分类');
      if (!this.form.name) return this.$message.error('请输入分类');
      if (!this.form.img) return this.$message.error('请上传图片');
      // if (true) return
			this.request('admin/secondClass/', this.type?'put':'post', this.form).then(res => {
			  this.getData();
				if (res.errno == 0) {
					this.$message.success(res.errmsg);
					this.form = {
            name: '',
            img: '',
            sort: 0,
            is_display:1,
				    class_first_id:''
          };
				} else {
					this.$message.error(res.errmsg);
				}
			});
			this.editVisible = false;
		},
		// 分页导航
		handlePageChange(val) {
			this.$set(this.query, 'pageIndex', val);
			this.getData();
		}
	}
};
</script>

<style scoped>
.container {
	padding: 20px;
}
.el-upload--text {
	width: 200px !important;
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;

	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	/* width: 100px; */
	height: 100px;
	line-height: 100px;
	text-align: center;
}

.avatar {
	width: 100%;
	height: 178px;
	display: block;
}

.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #ff0000;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 30px;
	height: 30px;
  border-radius: 2px;
	.el-image img{
		object-fit: cover;
	}
}
/* 设置分页按钮样式 */
.pagination{
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}
</style>
